<template>
  <div class="demand padbottom">
    <div class="info-title">
      <div class="title">牵头信息</div>
      <p v-if="isDemandNode" class="text-add" @click="handleAddHead">
        设置牵头
      </p>
    </div>
    <van-cell-group v-if="decomposeData && decomposeData.leader">
      <van-field
        v-if="isDemandNode"
        v-model="decomposeData.leader.leader_team_name"
        label="牵头团队"
        label-class="labelColor"
        input-align="right"
        placeholder="牵头团队"
        readonly
        is-link
        arrow-direction="down"
        @click="getOption"
      />
      <van-field
        v-else
        v-model="decomposeData.leader.leader_team_name"
        label="牵头团队"
        label-class="labelColor"
        input-align="right"
        placeholder="牵头团队"
        readonly
      />
      <van-field
        v-model="decomposeData.leader.leader_name"
        label="团队长"
        label-class="labelColor"
        input-align="right"
        placeholder="团队长"
        readonly
      />
      <van-field
        v-model="decomposeData.leader.involve_system_name"
        label="涉及系统"
        input-align="right"
        label-class="labelColor"
        placeholder="涉及系统"
        readonly
      />
      <!-- 复选框 -->
      <van-field name="checkboxGroup" label="架构审核">
        <template #input>
          <van-checkbox-group
            @change="chooseFramework"
            v-model="checkboxGroup"
            icon-size="20"
            checked-color="#009966"
            direction="horizontal"
          >
            <van-checkbox
              v-for="item in frameworkData"
              :key="item.id"
              :name="item.value"
              shape="square"
              :disabled="!isDemandNode"
              >{{ item.value }}</van-checkbox
            >
          </van-checkbox-group>
        </template>
      </van-field>
      <!-- <van-field
        v-model="decomposeData.leader.framework[0]"
        label="架构审核"
        is-link
        readonly
        arrow-direction="down"
        label-class="labelColor"
        @click="chooseArchitecture"
        input-align="right"
        placeholder="请选择架构审核"
      /> -->
      <van-field
        v-if="leaderStatus == 0"
        v-model="decomposeData.leader.project_leader_name"
        label="项目负责人"
        is-link
        readonly
        arrow-direction="down"
        label-class="labelColor"
        @click="chooseArchitecture"
        input-align="right"
        placeholder="请选择项目负责人"
      />
      <van-field
        v-if="leaderStatus == 1"
        v-model="decomposeData.leader.project_leader_name"
        label="项目负责人"
        label-class="labelColor"
        input-align="right"
        placeholder="项目负责人"
        readonly
      />
      <van-field
        v-if="opinionStatus == 0"
        v-model="decomposeData.leader.opinion"
        label="架构审核意见"
        rows="1"
        autosize
        type="textarea"
        label-class="labelColor"
        input-align="right"
        placeholder="请输入架构审核意见"
      />
      <van-field
        v-if="opinionStatus == 1"
        v-model="decomposeData.leader.opinion"
        label="架构审核意见"
        rows="1"
        autosize
        type="textarea"
        label-class="labelColor"
        input-align="right"
        placeholder="请输入架构审核意见"
        readonly
      />
    </van-cell-group>
    <van-popup position="bottom" get-container="body" v-model="showPop">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPop = false"
      />
    </van-popup>
    <div v-if="isDemandNode || (decomposeData.list && decomposeData.list.length>0)" class="info-title">
      <div class="title">需求分解</div>
      <img
        v-if="isDemandNode && baseData.ggtofj == 0 && baseData.ggtopl == 0"
        src="@/assets/svg/xinjian.svg"
        class="add"
        @click="handleAdd"
      />
    </div>
    <van-swipe-cell
      class="info-content"
      v-for="(item, index) in decomposeData.list"
      :key="index"
    >
      <div @click="goEdit(item.id)">
        <div class="intro">
          <p class="title">{{ item.plate_name }}</p>
          <p class="desc">{{ item.system_name }}</p>
        </div>
        <p class="name">系统负责人：{{ item.leader }}</p>
      </div>
      <template v-if="isCurrentNode" #right>
        <van-button
          @click="delList(item.id)"
          square
          text="删除"
          type="danger"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
    <van-popup position="bottom" get-container="body" v-model="showOption">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirmOption"
        @cancel="showOption = false"
      />
    </van-popup>
    <div v-if="isCurrentNode" class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
import {
  delServiceList,
  serviceDecompose,
  // demandLeader,
  framework,
  setFramework,
  architectureApproval,
  projectLeader,
  setProjectLeader,
  getLeaderteamlist,
  submitleaderteam,
} from "@/api/service.js";
import { Toast } from "vant";

export default {
  components: {},
  props: ["id", "currentNode","baseData"],
  data() {
    return {
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      decomposeData: {},
      leadData: {},
      columns: [],
      frameworkData: [],
      checkboxGroup: [],
      showPop: false,
      architecture: "",
      isCurrentNode: true, //是否进行到当前节点
      isDemandNode: true, //是否是需求分解节点
      leaderStatus: 0, //项目负责人显示情况  0可选 1只读 2隐藏
      opinionStatus: 0, //审核意见显示情况  0可编辑  1只读 2隐藏
      projectLeaders: "", //所有项目负责人
      showOption: false, //牵头团队选择
      leadTeams:'',  //所有牵头团队
      leadTeamId:'' ,//选中牵头id
    };
  },
  watch: {
    id(newVal) {
      console.log(newVal);
      this.getData();
    },
  },
  mounted() {
    console.log(this.id);
    if (this.id) {
      this.getData();
      this.checkNode();
      this.checkItem();
    }
  },
  methods: {
    //牵头团队
    getOption() {
      this.showOption = true;
      // assessUsers({
      //   server_id: this.id,
      // }).then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     for (var i = 0; i < res.data.length; i++) {
      //       this.users = res.data;
      //       this.columns.push(res.data[i].name);
      //     }
      //   }
      // });
      // nodeApprover().then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     for (var i = 0; i < res.data.length; i++) {
      //       this.users = res.data;
      //       this.columns.push(res.data[i].username);
      //     }
      //   }
      // });
      getLeaderteamlist().then((res) => {
        console.log(res);
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.leadTeams = res.data;
            this.columns.push(res.data[i].leadTeamName);
          }
        }
      });
    },
    onConfirmOption(value, index) {
      console.log(value, index);
      this.leadTeamId = this.leadTeams[index].leadTeamID;
      this.decomposeData.leader.leader_team_name = value;
      this.decomposeData.leader.leader_name = this.leadTeams[index].leaderName;
      this.decomposeData.leader.involve_system_name = '';
      this.showOption = false;
      submitleaderteam({
        server_id:this.id,
        leadTeamName:this.decomposeData.leader.leader_team_name,
        leadTeamID:this.leadTeamId,
        leaderName:this.decomposeData.leader.leader_name,
        leadUserName:this.leadTeams[index].leadUserName,
        node_id:this.currentNode
      }).then((res)=>{
        console.log(res)
        if(res.code==200){
          Toast("牵头设置成功");
        }
      })
      
    },
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    submit() {
      localStorage.setItem("checkboxGroup", this.checkboxGroup);
      // Toast('提交')
      if (this.decomposeData.leader.leader_team_name == "") {
        Toast("请选择牵头团队");
        return;
      }
      if (this.currentNode == "T10340") {
        if (!this.decomposeData.leader.project_leader_name) {
          Toast("请选择项目负责人");
          return;
        }
      }
      if (this.currentNode == "T10077") {
        //审核意见可编辑
        architectureApproval({
          server_id: this.id,
          opinion: this.decomposeData.leader.opinion,
          node_id:this.currentNode
        }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$router.push({
              path: "/service/node-flow",
              query: {
                id: this.id,
                showUser: false,
                source: this.currentNode,
                backInfo:this.baseData
              },
            });
          } else {
            Toast(res.message);
          }
        });
      } else {
        this.$router.push({
          path: "/service/node-flow",
          query: {
            id: this.id,
            showUser: false,
            source: this.currentNode,
            backInfo:this.baseData
          },
        });
      }
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
    getData() {
      let that = this;
      //需求分解单
      serviceDecompose({
        id: that.id,
        node_id:that.currentNode
      }).then((res) => {
        console.log(res);
        // if(res.data.leader){
        //   res.data.leader.framework = res.data.leader.framework.toString()
        // }
        // res.data.leader.opinion = ''
        that.decomposeData = res.data;
        that.checkboxGroup = that.decomposeData.leader
          ? that.decomposeData.leader.framework
          : "";
        this.getFramework();
      });
    },
    //检查是否是当前节点
    checkNode() {
      console.log(this.currentNode);
      if (
        this.currentNode == "T10013" ||
        this.currentNode == "T10340" ||
        this.currentNode == "T10077"
      ) {
        this.isCurrentNode = true;
      } else {
        this.isCurrentNode = false;
      }

      if (this.currentNode == "T10013") {
        this.isDemandNode = true;
      } else {
        this.isDemandNode = false;
      }
    },
    //核对信息项显示情况
    checkItem() {
      //项目负责人
      if (this.currentNode == "T10340") {
        //可编辑
        this.leaderStatus = 0;
      } else if (
        this.currentNode == "T10013" ||
        this.currentNode == "T10015" ||
        this.currentNode == "T10067"
      ) {
        //隐藏
        this.leaderStatus = 2;
      } else {
        //只读
        this.leaderStatus = 1;
      }
      //审核意见
      if (this.currentNode == "T10077") {
        //可编辑
        this.opinionStatus = 0;
      } else if (
        this.currentNode == "T10013" ||
        this.currentNode == "T10015" ||
        this.currentNode == "T10067" ||
        this.currentNode == "T10340"
      ) {
        //隐藏
        this.opinionStatus = 2;
      } else {
        //只读
        this.opinionStatus = 1;
      }
    },
    //获取构架审核选项
    getFramework() {
      framework().then((res) => {
        console.log(res);
        if (res.status == "success") {
          this.frameworkData = res.data;
        }
      });
    },
    //设置构架审核
    chooseFramework() {
      this.decomposeData.leader.framework = this.checkboxGroup;
      setFramework({
        server_id: this.id,
        framework: this.decomposeData.leader.framework,
        node_id:this.currentNode
      }).then((res) => {
        if (res.code != 200) {
          Toast(res.message);
        }
      });
    },
    //项目负责人
    getProjectLeader() {
      projectLeader({
        server_id: this.id,
        node_id:this.currentNode
      }).then((res) => {
        if (res.status == "success") {
          this.projectLeaders = res.data;
          for (var i = 0; i < res.data.length; i++) {
            this.columns.push(res.data[i].name);
          }
        }
      });
    },
    chooseArchitecture() {
      this.columns = [];
      this.getProjectLeader();
      this.showPop = true;
    },
    onConfirm(value) {
      this.decomposeData.leader.project_leader_name = value;
      let leadname = value;
      let leaderid = "";
      for (let i = 0; i < this.projectLeaders.length; i++) {
        if (this.projectLeaders[i].name == leadname) {
          leaderid = this.projectLeaders[i].id;
        }
      }
      this.showPop = false;
      setProjectLeader({
        server_id: this.id,
        project_leader: leadname,
        user_id: leaderid,
        node_id:this.currentNode
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // Toast('项目负责人选择成功');
        } else {
          Toast(res.message);
        }
      });

      localStorage.setItem("leadData", this.leadData);
    },
    // unique(arr) {
    //     const res = new Map();
    //     return arr.filter((a) => !res.has(a) && res.set(a, 1))
    // },
    handleAddHead() {
      this.$router.push({
        path: "/service/lead",
        query: {
          id: this.id, //服务单id
        },
      });
    },

    //创建需求分解单
    handleAdd() {
      let that = this;
      this.$router.push({
        path: "/service/demand",
        query: {
          id: that.id, //服务单id
        },
      });
    },

    //编辑需求分解单
    goEdit(id) {
      if (this.isDemandNode && this.baseData.ggtofj == 0 && this.baseData.ggtopl == 0) {
        this.$router.push({
          path: "/service/demand",
          query: {
            id: id, //需求分解单id
            isEdit: 1,
            server_id: this.id,
          },
        });
      }
    },
    // 删除需求分解单
    delList(id) {
      console.log(id);
      let that = this;
      if (id) {
        delServiceList({
          task_id: id,
          server_id: this.id,
          node_id:this.currentNode
        }).then((res) => {
          console.log(res.data);
          if (res.status == "success") {
            for (var i = 0; i < that.decomposeData.length; i++) {
              if (that.decomposeData[i].id == id) {
                that.decomposeData.splice(i, 1);
              }
            }
            console.log(that.decomposeData);
          }
          Toast(res.message);
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.demand {
  margin-top: 10px;
  &.padbottom {
    padding-bottom: 100px;
  }
  .info-box {
    margin-bottom: 10px;
    background: #fff;
  }
  // info-title
  .info-title {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 53px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #011445;
    }
    .add {
      width: 21px;
    }
    .text-add {
      font-size: 14px;
      color: #009966;
    }
  }
  /deep/.van-field__control--custom {
    justify-content: flex-end;
  }
  /deep/.labelColor {
    color: rgba(49, 53, 65, 0.6);
  }
  /deep/.van-field__label {
    color: rgba(49, 53, 65, 0.6);
  }
  /deep/.van-field__control {
    color: #313541;
  }
  /deep/.van-checkbox__label {
    color: #313541;

  }
  // info-content
  .info-content {
    background: #fff;
    margin-bottom: 10px;
    .intro {
      height: 62px;
      padding: 15px 0 0;
      margin: 0 15px;
      border-bottom: 1px solid #f2f2f2;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #313541;
        margin: 0;
      }
      .desc {
        font-size: 12px;
        color: #313541;
        margin-top: 6px;
        margin-bottom: 0;
      }
    }
    .van-button--danger {
      border-color: #fa5151;
      background: #fa5151;
    }
    .van-button {
      height: 100%;
    }
    .name {
      padding: 0 15px;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #011445;
    }
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: rgba(147, 157, 173, 0.18);
      color: #313541;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
  .van-checkbox--horizontal{
    margin-right: 8px !important;
  }
</style>